import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: scale(0);\n  transform-origin: right center;\n  transition: all 0.3s;\n  z-index: 10;\n  &.enter {\n    transform: scale(1);\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import TablePreview from "./TablePreview";
import PreviewAction from "../_components/PreviewAction";
import FormPreview from "./FormPreview"; // import ThemeContext from "../../utils/ThemeContext";

import { pageEvents } from "../../utils/event";
var PreviewContainer = styled.div(_templateObject());
var components = [TablePreview, FormPreview];

var PreviewPage = function PreviewPage(props) {
  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      page = _useState2[0],
      setPage = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      enter = _useState4[0],
      setEnter = _useState4[1]; // const theme = useContext(ThemeContext);


  useEffect(function () {
    setEnter(true);
    return function () {
      return setEnter(false);
    };
  }, []);

  var handleExit = function handleExit() {
    setEnter(false);
    setTimeout(function () {
      // props.history.push("/theme-config/components");
      props.onBack();
      pageEvents.emit("previewBack");
    }, 300);
  };

  var handleChildBack = function handleChildBack() {
    if (page > 0) {
      setPage(page - 1);
    }
  };

  var handleNext = function handleNext() {
    if (page < 1) setPage(page + 1);
  };

  var Component = components[page];
  return React.createElement(PreviewContainer, {
    className: enter ? "enter" : ""
  }, React.createElement(Component, {
    onBack: handleChildBack,
    onExit: handleExit,
    onNext: handleNext
  }), React.createElement(PreviewAction, {
    onPrev: handleChildBack,
    onNext: handleNext,
    noPrev: page === 0,
    noNext: page === 1,
    showNext: page < 1
  }));
};

PreviewPage.defaultProps = {
  onBack: function onBack() {}
};
export default PreviewPage;